﻿@page "/docs/extensions/datagrid/features/filtering"

<Seo Canonical="/docs/extensions/datagrid/features/filtering" Title="Blazorise DataGrid Filtering" Description="Learn Blazorise by the example. Quickly search and filter by any column, or customize filter options to fit your needs." />

<DocsPageTitle Path="Extensions/DataGrid/Features/Filtering">
    Blazorise DataGrid: Filtering
</DocsPageTitle>

<DocsPageLead>
    Filtering allows you to view particular records based on filter criteria.
</DocsPageLead>

<DocsPageSubtitle>
    Overview
</DocsPageSubtitle>

<DocsPageParagraph>
    Filtering in the Blazorise DataGrid can be done using the built-in filtering functionality or by using a custom filter component. The built-in filter allows you to quickly filter data by a specific column using a text box. You can also specify the filter mode, such as "contains" or "starts with".
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Filtering">
        <Paragraph>
            Use an attribute <Code>Filterable</Code> to enable or disable automatic filtering in grid component.
        </Paragraph>
        <Paragraph>
            Default method for filtering is <Code>Contains</Code>. If you want to change it you can set the <Code>FilterMethod</Code> attribute on data grid. Supported methods are:
        </Paragraph>
        <Paragraph>
            <UnorderedList>
                <UnorderedListItem><Code>Contains</Code> search for any occurrence (default)</UnorderedListItem>
                <UnorderedListItem><Code>StartsWith</Code> search only the beginning</UnorderedListItem>
                <UnorderedListItem><Code>EndsWith</Code> search only the ending</UnorderedListItem>
                <UnorderedListItem><Code>Equals</Code> search must match the entire value</UnorderedListItem>
                <UnorderedListItem><Code>NotEquals</Code> opposite of Equals</UnorderedListItem>
            </UnorderedList>
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridFilterExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridFilterExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Column Filtering">
        <Paragraph>
            Similar to the DataGrid filtering, it is also possible to use filtering on a per-column basis by specifying <Code>FilterMethod</Code> on <Code>DataGridColumn</Code>.
        </Paragraph>
        <Paragraph>
            The following example sets the column filtering to <Code>FilterMethod.StartsWith</Code>.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridColumnFilteringExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridColumnFilteringExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Menu Mode Filtering">
        <Paragraph>
            Similar to the previous Column Filtering example, we can enable the <Code>DataGridFilterMode.Menu</Code> to visually show the column filtering.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridFilterModeColumnFilteringExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridFilterModeColumnFilteringExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Menu Mode Filtering : Template">
        <Paragraph>
            When using Menu Mode Filtering you may also use the <Code>FilterTemplate</Code> to customize the filter input to your liking.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridFilterModeColumnTemplateFilteringExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridFilterModeColumnTemplateFilteringExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Custom Filtering">
        <Paragraph>
            Regular filter works on per field basis. To enable advanced search capabilities you can use an attribute <Code>CustomFilter</Code>.
        </Paragraph>
        <Paragraph>
            Filter API is fairly straightforward. All you need is to attach <Code>CustomFilter</Code> to a function and bind search value to <Code>TextEdit</Code> field. DataGrid will automatically respond to entered value.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridCustomFilteringExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridCustomFilteringExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Custom Column Filtering">
        <Paragraph>
            Similar to the DataGrid custom filtering, it is also possible to use custom filtering on a per-column basis.
        </Paragraph>
        <Paragraph>
            You can define your editor with custom filtering to filter column values. You can see the dropdown menu to filter by gender in the following example by specifying <Code Tag>FilterTemplate</Code> on <Code>DataGridColumn</Code>.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent FullWidth Outlined>
        <DataGridCustomColumnFilteringExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridCustomColumnFilteringExample" />
</DocsPageSection>

<DocsPageApi>
    <DocsPageApiItem Url="docs/extensions/datagrid/api" Name="<DataGrid />" />
</DocsPageApi>